<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../themes/default/easyui.css"/>
    <link rel="stylesheet" href="../themes/icon.css"/>
    <script src="../jquery.min.js"></script>
    <script src="../jquery.easyui.min.js"></script>
</head>
<body>
<h2>手风琴</h2>
<div style="margin: 20px 0 10px 0">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">select</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">add</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">remove</a>
</div>
<div class="easyui-accordion" style="width: 500px;height: 300px" id="aa" data-options="multiple:true">
    <div title="头部打开" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding: 10px">
        <input type="text" class="easyui-searchbox" prompt="输入一些内容" style="width: 300px;height: 25px"/>
    </div>
    <div title="关于" data-options="iconCls:'icon-ok'" style="overflow: auto;padding: 10px">
        <h3>111111111</h3>
        <p>实验111</p>
    </div>
    <div title="帮助" data-options="iconCls:'icon-help'" style="padding: 10px">
        <p>实验222222222222222222222</p>
    </div>
    <div title="菜单" data-options="iconCls:'icon-search'" style="padding: 10px">
        <ul class="easyui-tree">
            <li>
                <span>foods</span>
                    <ul>
                        <li>
                            <span>水果</span>
                            <ul>
                                <li>苹果</li>
                                <li>橘子</li>
                            </ul>
                        </li>
                        <li>
                            <span>蔬菜</span>
                            <ul>
                                <li>土豆</li>
                                <li>西红柿</li>
                                <li>花菜</li>
                                <li>白菜</li>
                            </ul>
                        </li>
                    </ul>

            </li>
        </ul>
    </div>
    <div title="载入内容" data-options="href:'_content.html'" style="padding: 10px">

    </div>
</div>
</body>
<script>
    //控制加入的东西
    function selectPanel(){
        $.messager.prompt('Prompt','选择进入的名称',function(s){
            if(s){
                $('#aa').accordion('select',s)
            }
        })
    }
    var idx=1;
    function addPanel(){
        $('#aa').accordion('add',{
            title:'Title'+idx,
            content:'<div style="padding: 10px">Content'+idx+'</div>'
        });
        idx++;
    }
    function removePanel(){
        var pp=$('#aa').accordion('getSelected');
        if(pp){
            var index=$('#aa').accordion('getPanelIndex',pp);
            $('#aa').accordion('remove',index);
        }
    }
</script>
</html>